<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="top">
            <view class="inptmain">
                <input type="number" :focus="firstFocus" v-model="code" placeholder="请输入商品条形码" />
                <view class="add" @click="search()">添加</view>
            </view>
        </view>
        <view class="code">
            <image src="../../static/code.png"></image>
            <view>请参照上图输入商品数字条码</view>
        </view>
    </view>
</template>

<script>
import { AddScanBuyProductToCar } from "@/service/api/product.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {},
    data() {
        return {
            config: {
                title: "扫码购",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
            },
            firstFocus: false,
            code: "",
            valetUserId: 0,
            warehouseId: 0,
            valetUserInfo: "",
        }
    },
    onLoad(e) {
        var that = this
        that.firstFocus = false
        setTimeout(function () {
            that.firstFocus = true
        }, 500)
        this.valetUserInfo = e.valetUserInfo
        this.valetUserId = Number(e.valetUserId)
        this.warehouseId = Number(e.warehouseId)
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.mainColor = mainColor
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {},
    methods: {
        search() {
            if (this.code == "") {
                this.easyToast("请输入商品条形码")
                return
            }
            let path = "?SearchKey=" + this.code + "&UserId=" + this.valetUserId + "&WarehouseId=" + this.warehouseId
            AddScanBuyProductToCar(path).then((res) => {
                if (res.State == 1) {
                    this.easyGoTo(
                        "/pages/customer/replace-order?valetUserId=" +
                            this.valetUserId +
                            "&valetUserInfo=" +
                            this.valetUserInfo +
                            "&warehouseId=" +
                            this.warehouseId,
                    )
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getListHeight(element) {
            getElementHeight(this, ".items", (e) => {
                let bottomBarHeight = e
                //再获取列表高度
                this.listHeight = e + "px"
                this.load = true
                //#ifndef MP
                this.refresh()
                //#endif
            })
        },
        getData(page) {
            let param = this.param
            param.pageSize = page.size
            param.pageIndex = page.num
            getAccountList(param).then((res) => {
                if (res.State && res.Data) {
                    this.otherData = res.OtherData
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #fff;
}
.top {
    height: 290rpx;
    padding-top: 84rpx;
    background: $app-color-main;
    position: relative;
    .inptmain {
        padding: 0 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
            width: 470rpx;
            height: 80rpx;
            background: #ffffff;
            border-radius: 40rpx;
            border: 2rpx solid #222a42;
            padding-left: 30rpx;
        }
        .add {
            width: 172rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 45rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: $app-color-main;
        }
    }
}
.code {
    width: 750rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;
    position: relative;
    margin-top: -84px;
    padding-top: 100rpx;
    image {
        width: 500rpx;
        height: 264rpx;
        display: block;
        margin: 0rpx auto 0 auto;
    }
    view {
        text-align: center;
        font-size: 28rpx;
    }
}
</style>
